<template>
  <div>
    <el-button
      type="primary"
      icon="el-icon-zoom-in"
      circle
      @click="addTicket"
    ></el-button>
    <!-- 新增罚单弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="isShow"
      :width="width"
      :before-close="handleDialogClose"
      ><el-row>
        <el-col :span="12"
          ><div class="grid-content bg-purple">
            <el-form ref="form" label-width="80px">
              <br />
              <el-form-item label="车牌号:">
                <!-- style="width: 20%" -->
                <el-col>
                  <el-input
                    placeholder="违规车牌号"
                    v-model="ticket.carNo"
                    style="max-width: 200px"
                  ></el-input>
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-camera"
                    @click="openCamera"
                    >拍照识别</el-button
                  >
                </el-col>
              </el-form-item>
              <el-form-item label="违规条例:">
                <el-col>
                  <el-select
                    v-model="ticket.ruleId"
                    placeholder="请选择"
                    style="max-width: 200px"
                  >
                    <el-option
                      v-for="item in rules"
                      :key="item.id"
                      :label="item.ruleName"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-form></div
        ></el-col>
        <el-col :span="12"
          ><div class="grid-content bg-purple-light">
            <div id="showVideo" style="margin: 0 auto" v-show="cameraShow">
              <video id="video"></video>
              <canvas
                id="canvas"
                width="300px"
                height="200px"
                style="display: none"
              ></canvas>
              <br />
              <el-button type="primary" @click="getImage">识别车牌</el-button>
              <el-button type="danger" @click="closeCamera"
                >关闭摄像头</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取消</el-button>
        <el-button type="primary" @click="createTicket">保存</el-button>
      </span>
    </el-dialog>
    <el-tabs type="border-card">
      <el-tab-pane label="我的处理记录">
        <self-tickets ref="selfTickets"></self-tickets>
      </el-tab-pane>
      <el-tab-pane label="所有处理记录"
        ><all-tickets ref="allTickets"></all-tickets>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CameraUtil from "@/util/CameraUtil";
import Url from "@/util/URLUtil";
import { isVehicleNumber } from "@/util/CarNoRegxUtil.js";
import allTickets from "./allTickets.vue";
import selfTickets from "./selfTickets.vue";
export default {
  components: { allTickets, selfTickets },
  name: "ticket",
  data() {
    return {
      title: "创建罚单",
      isShow: false,
      width: "30%",
      cameraShow: false,
      img: "",
      ticket: {
        carNo: "",
        policeId: "",
        ruleId: "",
        state: "0",
      },
      rules: [],
      page: {
        current: 1, //当前页
        size: 5, //每页数据条数
        pages: 0, //总页数
        total: 0, //总数据条数
      },
    };
  },
  methods: {
    //打开新增模态框
    addTicket() {
      //打开新增模态框,初始化弹窗内容
      this.isShow = true;
      this.cameraShow = false;
      this.width = "30%";
      this.initRuleSelect();
      this.ticket.carNo = "";
      this.ticket.ruleId = "";
    },
    //关闭弹窗初始化弹窗样式
    handleDialogClose() {
      this.width = "30%";
      this.isShow = false;
      this.cameraShow = false;
      CameraUtil.closeCamera();
    },
    //关闭摄像头
    closeCamera() {
      this.width = "30%";
      this.cameraShow = false;
      CameraUtil.closeCamera();
    },
    //打开摄像头,开启识别功能
    openCamera() {
      this.width = "50%";
      this.cameraShow = true;
      CameraUtil.openCamera();
    },
    //拍照并识别,后台识别,并将识别结果返回给前端
    getImage() {
      this.img = CameraUtil.getImage();
      var self = this;
      $.ajax({
        url: Url.url + "/api/ocr",
        type: "post",
        contentType: "application/x-www-form-urlencoded",
        data: { img: self.img },
        dataType: "json",
        success(data) {
          var res = eval("(" + data.result + ")");
          self.ticket.carNo = res.words_result.number;
        },
      });
    },
    //初始化,条例下拉框数据
    initRuleSelect() {
      var self = this;
      $.ajax({
        url: Url.url + "/api/rules",
        type: "get",
        dataType: "json",
        success(data) {
          self.rules = data;
          // console.log(data);
        },
      });
    },
    //生成罚单信息
    createTicket() {
      if (this.ticket.carNo == "") {
        this.$message({
          message: "请填入违规车牌号",
          type: "warning",
        });
      } else if (this.ticket.ruleId == "") {
        this.$message({
          message: "请选择违规条例",
          type: "warning",
        });
      } else {
        //在所需数据都填入成功后,判断车牌号时候符合规则,主要是判断手动录入的车牌是否准确
        if (isVehicleNumber(this.ticket.carNo)) {
          var self = this;
          console.log(this.ticket);
          //请求后端存入罚单信息
          $.ajax({
            url: Url.url + "/api/create",
            type: "post",
            contentType: "application/json",
            data: JSON.stringify(self.ticket),
            success(data) {
              // console.log(data);
              if (data.msg == "SUCCESS") {
                self.$refs.allTickets.initAllTicketTable();
                self.$refs.selfTickets.initSelfTicketTable();
              }
            },
          });
          this.$message({
            message: "罚单创建成功！",
            type: "success",
          });
          self.handleDialogClose();
        } else {
          this.$message({
            message: "车牌号不符合规范,请重新输入",
            type: "warning",
          });
        }
      }
    },
  },
  mounted() {
    //模拟当前登录警察信息已经存入
    //从本地获取当前登录的警察的用户id
    this.ticket.policeId = localStorage.getItem("loginPoliceCardId");
    // this.ticket.policeId = "500235199805059271";
    // self.$refs.allTickets
  },
};
</script>
<style >
</style>
